<template>
  <div class="x-pagination">
    <button
      type="button"
      class="btn-prev number"
      :disabled="myCurrentPage === 1"
      @click="setMyCurrentPage(-1)"
    >
      <i class="iconfont icon-arrow-left-bold"></i>
    </button>
    <ul class="x-pager">
      <li
        :class="{
          number: true,
          active: myCurrentPage === 1,
        }"
        @click="toPage(1)"
      >
        1
      </li>
      <i class="iconfont icon-elipsis number" v-show="startEnd.start > 2"></i>
      <li
        v-for="(number, index) in startEnd.end - startEnd.start + 1"
        v-show="startEnd.end - startEnd.start + 1"
        :key="startEnd.start + index"
        :class="{
          number: true,
          active: myCurrentPage === startEnd.start + index,
        }"
        @click="toPage(startEnd.start + index)"
      >
        {{ startEnd.start + index }}
      </li>
      <i
        class="iconfont icon-elipsis number"
        v-show="startEnd.end < totalPages - 1"
      ></i>
      <li
        :class="{
          number: true,
          active: myCurrentPage === totalPages,
        }"
        @click="toPage(totalPages)"
        v-show="totalPages > 2"
      >
        {{ totalPages }}
      </li>
    </ul>
    <button
      type="button"
      class="btn-next number"
      :disabled="myCurrentPage === totalPages"
      @click="setMyCurrentPage(1)"
    >
      <i class="iconfont icon-arrow-right-bold"></i>
    </button>
    <span class="total">共 {{ total }} 条</span>
  </div>
</template>

<script>
export default {
  name: 'XiePagination',
  data() {
    return {
      myCurrentPage: this.currentPage,
    }
  },
  props: {
    total: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
      default: 5,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    toPage(currentPage) {
      this.myCurrentPage = currentPage
    },
    setMyCurrentPage(number) {
      this.myCurrentPage += number
    },
  },
  watch: {
    myCurrentPage(newVal) {
      this.$emit('current-change', newVal)
    },
  },
  computed: {
    //总页数
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    },
    // 计算中间按钮得开始和结束
    startEnd() {
      const { myCurrentPage, totalPages } = this
      if (totalPages <= 7) {
        return {
          start: 2,
          end: totalPages - 1 < 1 ? 1 : totalPages - 1,
        }
      }
      let start = myCurrentPage - 2
      if (start < 2) start = 2
      let end = start + 4
      if (end > totalPages - 1) {
        end = totalPages - 1
        start = end - 4
      }
      return {
        start,
        end,
      }
    },
  },
}
</script>

<style scoped>
.x-pagination {
  display: flex;
  font-weight: 700;
}

.btn-prev,
.btn-next {
  border: none;
  outline: none;
}

.btn-prev:disabled,
.btn-next:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.x-pager {
  display: flex;
}

.number {
  margin: 0 5px;
  width: 30px;
  height: 30px;
  background-color: #f4f4f5;
  color: #606266;
  border-radius: 2px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.active {
  background-color: #c81623;
  color: #fff;
}

.total {
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  margin-left: 10px;
}
</style>
